<template>
  <view class="back">
    <view class="container">
      <!-- 用户头像和名称 -->
      <view class="user-info">
        <image class="avatar" src="../../static/images/user.jpg"></image>
        <text class="user-name" @click="goToMemberPage" v-if="currName == ''">未登录</text>
        <text class="user-name" @click="goToMemberPage" v-else>{{currName}}</text>
      </view>
      <view class="buttons" tabindex="1">
        <button @click="handleButtonClick('血压仪器')" :class="{ 'active': selectedButton === '血压仪器' }">
          血压仪器
        </button>
        <button @click="handleButtonClick('血氧仪器')" :class="{ 'active': selectedButton === '血氧仪器' }">
          血氧仪器
        </button>
        <button @click="handleButtonClick('测温仪器')" :class="{ 'active': selectedButton === '测温仪器' }">
          测温仪器
        </button>
      </view>
			<view class="devices">
				<view v-if="selectedButton === '血压仪器'">
				<!-- <xue></xue> -->
				    <xueya title="血压测量" name='打开弹窗'></xueya>
				  </view>
				  <view v-else-if="selectedButton === '血氧仪器'">
						<xueyang></xueyang>>
				  </view>
				  <view v-else-if="selectedButton === '测温仪器'">
						<tiwen></tiwen>
				  </view>
			</view>

    </view>

  </view>
</template>

<style>
	.devices{
		width: 100vw;
	}
.active {
  background-color: #0FA6E6;
  color: #fff;
  font-weight: bold;
}

page {
  background-color: #f3f6f8;
  /*  overflow-y: auto;
	  overflow-x: hidden; */
}

.back {
  /* 	position: absolute; */
  /* width: 375px; */
	width: 100vw;
  height: 450rpx;
  left: 0px;
  top: 0px;
  background: linear-gradient(179.81deg, #17A8E4 0.16%, #94D6E2 29.03%, #FFFFFF 70.53%);
}

.container {
  margin-top: 6%;
  padding: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-name {
  font-size: 28rpx;
}

.buttons {
  display: flex;
  margin-bottom: 30rpx;
}

button {
  display: block;
  flex: 1;
  height: 80rpx;

  color: #000;
  font-weight: normal;
  text-align: center;
  line-height: 80rpx;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  overflow: hidden;
}

/* 调整血压仪器按钮样式 */
button:first-child {
  border-top-left-radius: 33rpx;
  border-bottom-left-radius: 33rpx;
}

/* 调整血氧仪器按钮样式 */
button:nth-child(2) {
  border-radius: 0;
}

/* 调整测温仪器按钮样式 */
button:last-child {
  border-top-right-radius: 33rpx;
  border-bottom-right-radius: 33rpx;
}
</style>

<script>
export default {
	onShow() {
		this.currName = this.$store.state.user.name
	},
  data() {
    return {
			currName:this.$store.state.user.name,
      connectedToDevice: true, // 是否连接到设备
      measuring: true, // 设备是否在测量中
      activeButton: null,
      selectedButton: null,

      bluetoothDevices: [], // 存储蓝牙设备列表
      cardList: [], // 卡片列表
    };
  },
  methods: {
    handleButtonClick(device) {
      this.selectedButton = device;
    },
    goToMemberPage() {
      uni.navigateTo({
        url:'/pages/mem/mem'
      });
    },
  },
};
</script>